<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/tip/tip.js" charset="utf-8"></script>
<style>
h6{color: red}
</style>
<div id="messageBox">
	<div title="API">
		<div>
			<h2>$.fn.tip(ops)</h2>
			<h3 style="padding-top:10px;padding-bottom:10px;">作用：气泡提示，使用方法如：$S("#id").tip({ops})。</h3>

			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>
						<li class="ccay-form-row"><samp>ops</samp>
								 <span class='ccay-form-input'>
								 <div class="ccay-form-body">
								   <ul>
								     <li class="ccay-form-row"><samp>具体的参数类型</samp> <span class='ccay-form-input'>说明</span></li>
								   </ul>
								 </div>
								<div class="ccay-form-custom">
									<ul>
										<li class="ccay-form-row"><samp>action</samp> <span class='ccay-form-input'>
												<p>触发动作，'hover'(悬停)和'click'(点击),默认为'hover'<br/>
												<h6>当action='once',仅显示一次</h6>
										</span></li>
										<li class="ccay-form-row "><samp>tipProp</samp> <span
											class='ccay-form-input'>
												<p>显示内容的属性，默认为'title'
										</span></li>
										<li class="ccay-form-row"><samp>width</samp> <span class='ccay-form-input'>
												<p>tip宽度
										</span></li>
										<li class="ccay-form-row"><samp>height</samp> <span class='ccay-form-input'>
												<p>tip高度	
										</span></li>
										<li class="ccay-form-row"><samp>content</samp> <span class='ccay-form-input'>
												<p>自定义tip内容
										</span></li>
										<li class="ccay-form-row"><samp>container</samp> <span class='ccay-form-input'>
												<p>tip添加到的所在容器，默认为触发对象后面
										</span></li>
										<li class="ccay-form-row"><samp>[url]</samp> <span class='ccay-form-input'>
												<p>触发对象属性，tip ajax加载的页面的url,在所触发的对象指定
										</span></li>
										<li class="ccay-form-row"><samp>[target]</samp> <span class='ccay-form-input'>
												<p>触发对象属性，tip加载目标对象，在所触发的对象指定，<br/><h6>如：target="#target_content"，则tip的内容为目标target_content的内容</h6>
										</span></li>
										<li class="ccay-form-row"><samp>global</samp> <span class='ccay-form-input'>
												<p>是否生成在主页面body里
										</span></li>
										<li class="ccay-form-row"><samp>autoClose</samp> <span class='ccay-form-input'>
												<p>是否自动关闭
										</span></li>
										<li class="ccay-form-row"><samp>delayClose</samp> <span class='ccay-form-input'>
												<p>延迟关闭时间
										</span></li>
										<li class="ccay-form-row"><samp>addTipStyle</samp> <span class='ccay-form-input'>
												<p>是否添加tip触发样式
										</span></li>
										<li class="ccay-form-row"><samp>child</samp> <span class='ccay-form-input'>
												<p>子项触发选择器
										</span></li>
									</ul>
								</div>
						</span></li>
					</ul>
				</div>
			</form>
			
			<h2>$.fn.ccayRemoveTip() 或者 $.fn.manager('XTip').closeTip(delay) </h2>
			<h3 style="padding-top:10px;padding-bottom:10px;">作用：手动关闭气泡提示，使用方法如：$S("#id").ccayRemoveTip()。其中closeTip的delay参数是延时关闭的时间。</h3>
			
		</div>
	    
	</div>
	<div title="Demo">
		<h4><span>实例1：显示title设置值</span></h4>
		    <div style='padding-left:30px'>
			    <div class="demo">
	               <input type="button" id="button1" value="title提示" title="l am a button!"/>
			    </div>			    
			    <h3>html Code:</h3>
				<div class="codeArea">
		             <label id="html1">&lt;input type="button" id="tipDemo1" value="title提示"  title="l am a button!"/></label>	             
				</div>
				<h3>js Code:</h3>
				<div class="codeArea">
				     <label id="js1">$("#tipDemo1").tip();</label>		             
				</div>
				<div class='try'>
					<a  onclick="Ccay.example.openTry('#messageBox',$('#js1').html(),$('#html1').html())">亲自试一试</a>
				</div>
		    </div>
		<h4><span>实例2：设置传入的content的值</span></h4>
			<div style='padding-left:30px'>
				<div class="demo">
				   <input type="button" id="button2" value="指定内容提示"/>
				</div>
				
				<h3>html Code：</h3>
				<div class="codeArea">
		             <label id="html2">&lt;input type="button" id="tipDemo2" value="指定内容提示"/></label>				    
				</div>
				<h3>js Code：</h3>
				<div class="codeArea">
				     <label id="js2">$("#tipDemo2").tip({content:'l am the content!'});</label>
				</div>
				<div class='try'>
					<a  onclick="Ccay.example.openTry('#messageBox',$('#js2').html(),$('#html2').html())">亲自试一试</a>
				</div>
			</div>
		<h4><span>实例3：显示指定的target的值</span></h4>
			<div style='padding-left:30px'>
				<div class="demo">
					<div id="target_content" style="display:none">
			                <ul>
			                      <li>welcome</li>
			                      <li>target</li>
			                      <li>提示</li>
			                </ul>
			        </div>
				    <input type="button" id="button3" target="#target_content" value="target提示" />
				</div>
				
				<h3>html Code：</h3>
				<div class="codeArea">
		             <pre id="html3">
&lt;!-- tip内容 -->		             
&lt;div id="target_content" style="display:none">
     &lt;ul>
           &lt;li>welcome&lt;/li>
           &lt;li>指定target内容提示&lt;/li>
     &lt;/ul>
&lt;/div>
&lt;!-- 设置target="#target_content" 指定tip的内容 -->
&lt;input type="button" id="tipDemo3" target="#target_content" value="target提示" /></pre>
				</div>
				<h3>js Code：</h3>
				<div class="codeArea">
				     <label id="js3">$("#tipDemo3").tip();</label>
				</div>
				<div class='try'>
					<a  onclick="Ccay.example.openTry('#messageBox',$('#js3').html(),$('#html3').html())">亲自试一试</a>
				</div>
			</div>
		<h4><span>实例4：显示从外部引入的页面</span></h4>
			<div style='padding-left:30px'>
				<div class="demo">
				    <input type="button" id="button4" url="ccay/example/ui/tip/tipURL.html" value="ajax提示" /></div>
				<h3>html Code：</h3>
				<div class="codeArea">
		             <label id="html4">&lt;input type="button" id="tipDemo4" url="ccay/example/ui/tip/tipURL.html" value="ajax提示" /></label>
				</div>
				<h3>js Code：</h3>
				<div class="codeArea">
				     <pre id="js4">//其他参数可设置，如设置宽度width:500
$("#tipDemo4").tip({width:500});</pre>
				</div>
				<div class='try'>
					<a  onclick="Ccay.example.openTry('#messageBox',$('#js4').html(),$('#html4').html())">亲自试一试</a>
				</div>
			</div>
		<h4><span>实例5：onclick类型的tip提示</span></h4>
			<div style='padding-left:30px'>
				<div class="demo">
					 <input type="button" id="button5" title='please click me!' value="点击提示" />
				</div> 
				<div class="demo">
					 <input type='button' value='要想气泡消失就点击我吧！' onclick="$('#button5').manager('XTip').closeTip();"/>
				</div>
				<h3>html Code：</h3>
				<div class="codeArea">
		             <label id="html5">&lt;input type="button" id="tipDemo5" title='please click me!' value="点击提示" /></label>
				</div>
				<h3>js Code：</h3>
				<div class="codeArea">
				     <pre id="js5">//设置点击开启tip
$("#tipDemo5").tip({action:'click'});
//点击关闭tip,或者使用$('#tipDemo5').ccayRemoveTip()
$('#tipDemo5').manager("XTip").closeTip();
</pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#messageBox',$('#js5').html(),$('#html5').html())">亲自试一试</a>
				</div>
			</div>
		<h4><span>实例6：在屏幕边缘的tip，自动改变显示方向（可在宽屏时看到效果）</span></h4>
			<div style='padding-left:30px'>
				<div class="demo">
					 <div style='text-align:right;'><span id='button6' title="hello~~~~~~~~~~~~">屏幕边缘tip效果</span></div>
				</div> 
			</div>		
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
	    <ul>
	             <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
	    </ul>
		</div>     
		<div class="ccay-form-custom">
		    <ul>                     
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
		</div>
	  </form>                    
	</div>

</div>